<script setup>
  import { ref, getCurrentInstance, onMounted, reactive, computed } from "vue";
  import { useRouter } from "vue-router";
  import {
    ArrowRight,
    Upload,
    Download,
    Delete,
    Edit,
    Loading,
    View,
    Plus,
    FolderOpened
  } from "@element-plus/icons-vue";
  import { ElMessage, genFileId } from "element-plus";
  import lodash from "lodash";
  import { CircleClose } from "@element-plus/icons-vue";
  import moment from "moment";

  import filePreview from "@/components/filePreview";
  import { FileDownLoad, getLocalStorage, isEllipsis } from "@/utils/common";
  import api from "../../api";
  import axios from "axios";

  const { proxy } = getCurrentInstance();

  const route = useRouter();

  const doc = reactive({
    currentRowKey: "", //当前行的key
    treeData: [],
    seaVal: "",
    breadcrumb: [
      {
        label: "全部文件",
        id: 0,
      },
    ],
    fileView: [],
    filedescStyWidth: 0,
    lastBreadcrumbFile: null,
    fileDescObj: {},
    tableHeight: "calc(100vh - 180px)",
    filePreviewShow: false,
    upload: {
      show: false,
      form: {
        // tag: "",
        file: [],
      },
    },
    newFolder: {
      show: false,
      form: {
        // pTag: "",
        dirName: "",
      },
    },
    folderOpts: [],
    btnShow: false,
  });

  const multCheckBtns = [
    {
      name: "下载",
      value: "download",
      icon: Download,
    },
    // {
    //   name: "删除",
    //   value: "del",
    //   icon: Delete,
    // },
  ];

  const singCheckleBtns = [
    {
      name: "打开",
      value: "open",
      icon: View,
    },
    {
      name: "下载",
      value: "download",
      icon: Download,
    },
    {
      name: "上传",
      value: "upload",
      icon: Upload,
    },

    {
      name: "删除",
      value: "del",
      icon: Delete,
    },
    {
      name: "重命名",
      value: "rename",
      icon: Edit,
    },
  ];


  const getPid = function (id, layer) {
    const ids = id.split('/');
    let pid = '';
    ids.forEach((item, index) => {
      if (index <= layer - 1) {
        const split = (index === layer - 1) ? '' : '/'
        pid += item + split
      }
    });
    return pid
  }

  //返回数组转树结构
  let nodeId = 1;
  //type 类型 1：获取目录和文件的树结构；2：获取目录的树结构
  const arrayToTree = function (list, type = 1) {
    const result = [] // 用于存放结果
    const map = {} // 用于存放 list 下的节点

    for (const item of list) {
      map[item.dirTag] = lodash.cloneDeep(item)
    }
    for (const item of list) {
      let id = item.dirTag;
      let pid = '';
      if (item.layer === 0) {
        pid = 'root'
      } else {
        pid = getPid(item.dirTag, item.layer)
      }

      //给每个node添加唯一标识 / label /value / type
      map[id].fileName = map[id].dirName;
      map[id].fileTag = map[id].dirTag;
      map[id]._id = nodeId;
      map[id].type = 'folder'

      if (map[id].files && map[id].files.length > 0 && type === 1) {
        map[id].files.forEach((file, index) => {
          file._id = nodeId + '_' + index;
          map[file.fileTag].children
            ? map[file.fileTag].children.push(file)
            : (map[file.fileTag].children = [file])
        });

      }
      nodeId++;

      if (pid === 'root') {
        result.push(map[id])
      } else {
        if (map[pid]) {
          map[pid].children
            ? map[pid].children.push(map[id])
            : (map[pid].children = [map[id]])
        }
      }
    }
    return result
  }

  const treeLoading = ref(false);
  //获取文件列表
  //搜索内容
  const getFileList = function (keyword = "") {
    nodeId = 1;
    treeLoading.value = true;
    api.document.getAllFileList().then((res) => {
      treeLoading.value = false;
      const treeConstant = [
        {
          fileName: "全部文件",
          fileTag: "root",
          _id: 0,
          type: "root",
          children: [],
        },
      ];

      const conversionTree = arrayToTree(res.data);

      //关键字过滤
      if (keyword !== '') {
        treeConstant[0].children = filterTree(conversionTree, (item => {
          return item.fileName.includes(doc.seaVal)
        }))
      } else {
        treeConstant[0].children = conversionTree;

        //将所有的文件夹过滤成树结构
        // doc.folderOpts = arrayToTree(res.data, 2)
      }

      doc.treeData = treeConstant;
      //初始化默认右侧展示所有文件夹
      doc.fileView = lodash.cloneDeep(doc.treeData[0].children);

      doc.fileDescObj = {};
      doc.filedescStyWidth = 0;
      doc.btnShow = false;

      //判断当前展示页面是否为列表
      //如果是列表通过点击最后一个面包屑刷新当前列表数据
      if (doc.breadcrumb.length > 1) {
        const len = doc.breadcrumb.length;
        breadcrumbHandleClick(doc.breadcrumb[len - 1], len - 1);
      }
    });
  };
  getFileList();

  //获取文件类型
  const getFileType = computed(() => (item) => {

    //优先查看type字段
    if (item.type) {
      return item.type
    }

    const { fileName } = item;

    if (fileName) {
      let match = fileName.match(/[^.]+$/);
      return match ? match[0] : "root";
    } else {
      return 'folder'
    }


  });

  //表格key赋值
  const getRowKeys = function (row) {
    return row._id;
  };

  onMounted(() => { });

  //获取面包屑
  const getBreadcrumb = function (node) {
    if (node.data.fileName) {
      doc.breadcrumb.unshift({
        label: node.data.fileName || "--",
        id: node.data._id,
      });
      if (node.parent) {
        getBreadcrumb(node.parent);
      }
    }
  };

  //根据不同类型进行文件预览
  const ftype = ref("");
  const fpath = ref("");
  const fname = ref("");
  const keyMaps = {
    IMG: ["PNG", "JPG", "JPEG", "GIF"],
    TXT: ["TXT"],
    PDF: ["PDF"],
    VIDEO: ["MP4"],
    EXCEL: ["XLSX", "XLS"],
    WORD: ["DOC", "DOCX"],
    PPT: ["PPT", "PPTX"],
  };
  const filePreviewByType = function (item) {
    //获取当前文件类型
    ftype.value = "UNVIEW";
    for (let key in keyMaps) {
      if (keyMaps[key].includes(getFileType.value(item).toUpperCase())) {
        ftype.value = key;
      }
    }
    fpath.value = item.fileUrl;
    fname.value = item.fileName;
  };

  const nextLevel = function (data) {

    //根目录下无法上传和新建
    doc.btnShow = data.type !== 'root'

    //如果是根目录
    if (data.type === "root") {
      doc.fileView = lodash.cloneDeep(doc.treeData[0].children);
      doc.filedescStyWidth = 0;
    } else {
      doc.filedescStyWidth = 300;
    }

    //判断是否为文件夹
    if (data.type === "folder") {
      doc.fileView = lodash.cloneDeep(data.children || []);
      doc.lastBreadcrumbFile = data;

      //文件列表默认第一行高亮
      if (data.children && data.children.length > 0) {
        doc.currentRowKey = data.children[0]._id;
        doc.fileDescObj = data.children[0];
      } else {
        doc.currentRowKey = "";
        doc.fileDescObj = data;
      }
    }
  };

  //树节点点击
  const nodeHandleClick = function (data, node) {
    if (data.type !== "folder" && data.type !== "root") {
      doc.filePreviewShow = true;
      filePreviewByType(data);
      return;
    }
    doc.filePreviewShow = false;
    nextLevel(data);
    //更新面包屑
    doc.breadcrumb = [];
    getBreadcrumb(node);
  };

  //表格勾选
  const rowHandleClick = function (row) {

    doc.fileDescObj = row;
    doc.currentRowKey = row._id;

    if (row.type !== "folder" && row.type !== "root") {
      doc.filePreviewShow = true;
      filePreviewByType(row);
      return;
    }

    nextLevel(row);
    //更新面包屑
    doc.breadcrumb.push({
      label: row.fileName,
      id: row._id,
    });
  };

  const gridHandleClick = function (item) {
    nextLevel(item);
    //更新面包屑
    doc.breadcrumb.push({
      label: item.fileName,
      id: item._id,
    });
  };

  //通过id获取节点数据
  const getTreeDataById = function (data, id, result = []) {
    data.forEach((element) => {
      if (element._id === id) {
        result.push(element);
      }
      if (element.children && element.children.length > 0 && !result.length) {
        return getTreeDataById(element.children, id, result);
      }
    });
    return result;
  };

  //面包屑点击
  const breadcrumbHandleClick = function (item, index) {
    const filter = getTreeDataById(doc.treeData, item.id);
    if (filter.length === 0) return;
    nextLevel(filter[0]);
    //更新面包屑
    doc.breadcrumb.splice(index + 1, doc.breadcrumb.length);
  };

  const layerCloseHandleClick = function () {
    doc.filePreviewShow = false;
    fname.value = "";
    fpath.value = "";
    ftype.value = "";
  };

  //中止下载
  let fileDownLoad = null;
  const stopDownloadClick = function () {
    fileDownLoad.controller.abort();
    fileDownLoad = null;
    fileProcessShow.value = false;
    fileTotal.value = 0;
    filePercent.value = 0;
  };

  //文件下载
  const filePercent = ref(0);
  const fileTotal = ref(0);
  const fileProcessShow = ref(false);
  const fileName = ref("");
  //获取下载进度
  const getProcess = function (receive, total, name) {
    fileProcessShow.value = receive !== total;
    filePercent.value = ((receive / total) * 100).toFixed(0);
    fileTotal.value = (total / (1024 * 1024)).toFixed(2) + "M";
    fileName.value = name;
  };
  const downLoadFile = function (path) {
    const paths = [path];
    // doc.fileDescObj.forEach((item) => {
    //   paths.push(item.path);
    // });
    //实例一个下载对象
    fileDownLoad = new FileDownLoad(paths, getProcess);
    fileDownLoad.downloadPaper();
  };

  //文件操作
  const fileHandleClick = function (item) {
    const type = item.value;
    switch (type) {
      //下载文件
      case "download":
        if (fileProcessShow.value) {
          ElMessage({
            message: "有正在下载的任务！",
            type: "warning",
          });
          return;
        }

        downLoadFile();
        break;
      //打开文件
      case "open":
        rowHandleClick(doc.fileDescObj);
        break;
    }
  };

  const fileTypeOpts = [
    {
      label: "实测实量机器人",
      value: "robot",
    },
    {
      label: "塔吊维保记录",
      value: "crane",
    },
    {
      label: "碳排报告",
      value: "file",
    },
  ];

  const validatePass = function (rule, value, cb) {
    if (doc.upload.form.file.length === 0) {
      return cb(new Error("请上传文件"));
    }
    cb();

  };

  const rules = reactive({
    // tag: [{ required: true, message: "所属模块不能为空", trigger: "change" }],
    file: [{ required: true, validator: validatePass, trigger: "blur" }],
  });

  const rulesNewFolder = reactive({
    // ptag: [{ required: true, message: "所属模块不能为空", trigger: "change" }],
    dirName: [{ required: true, message: "文件名称不能为空", trigger: "blur" }],
  });

  const dialogCloseUpload = function () {
    ruleFormRef.value.resetFields();
    uploadRef.value.clearFiles();

    //根据上传标识判断是否为取消上传
    if (uploadLoading.value) {
      uploadLoading.value = false;
      proxy._GLOBAL.UPLOADCANCEL('文件上传已取消');
      proxy._GLOBAL.UPLOADCANCEL = null
    }
  };

  const dialogCloseNewFolder = function () {
    ruleFormNewFolderRef.value.resetFields();
  };

  const handleUploadDialog = function () {
    doc.upload.show = true;
  };

  const handleNewFolderDialog = function () {
    doc.newFolder.show = true;
  }

  const changeUpload = function (files) {
    doc.upload.form.file.push(files.raw);
  };

  const uploadRef = ref(null);
  const handleExceed = function (files) {
    
  };

  const handleRemove = function (files) {
    doc.upload.form.file = doc.upload.form.file.filter(item => {
      return item.uid !== files.uid
    });
  };

  //循环批量上传promise集合
  const uploadMultiplePromise = function () {
    const promiseMaps = [];
    doc.upload.form.file.forEach(file => {
      let fileName = file.name;
      const myFormData = new FormData();
      myFormData.append("unionId", getLocalStorage("pro_sel"));
      myFormData.append("tag", doc.lastBreadcrumbFile.dirTag);
      myFormData.append("file", file);
      promiseMaps.push(
        //添加catch捕获异常，保证如果有错误请求也能进入promise.all回调
        api.document.uploadFile(myFormData).catch(error => error)
      )
    });
    return promiseMaps;
  }

  const ruleFormRef = ref(null);
  const uploadLoading = ref(false);
  const dialogUpload = function (ruleFormRef) {
    if (!ruleFormRef) return;
    ruleFormRef.validate((valid, fields) => {
      if (valid) {
        //循环批量上传
        const promiseMaps = uploadMultiplePromise();
        uploadLoading.value = true;
        Promise.all(promiseMaps).then(res => {
          res.forEach((item, index) => {
            if (item?.response?.data?.length > 0) {
              ElMessage({
                type: "success",
                message: `${doc.upload.form.file[index].name}上传成功`,
              });
              doc.upload.show = false;
            } else {
              ElMessage.error(`${doc.upload.form.file[index].name}上传失败 ` + (item.response.errMsg || ''));
            }
          });
          uploadLoading.value = false;
          getFileList(doc.seaVal);
        }).catch(error => {
          if (axios.isCancel(error)) {
            ElMessage.error(error.message);
            console.log('Request canceled');
          } else {
            ElMessage.error(error.errMsg);
          }
        });
      }
    });
  };

  const ruleFormNewFolderRef = ref(null);
  const newFolderLoading = ref(false);
  const dialogNewFolder = function (ruleFormNewFolderRef) {
    if (!ruleFormNewFolderRef) return;
    ruleFormNewFolderRef.validate((valid, fields) => {
      if (valid) {
        const myFormData = new FormData();
        myFormData.append("unionId", getLocalStorage("pro_sel"));
        //获取当前上传的类型
        newFolderLoading.value = true;
        api.document.addNewDirPath({
          "dirTag": doc.lastBreadcrumbFile.dirTag,
          "dirName": doc.newFolder.form.dirName
        }).then((res) => {
          if (res?.data?.status == 'success') {
            ElMessage({
              type: "success",
              message: "创建成功",
            });
            doc.newFolder.show = false;
            getFileList(doc.seaVal);
          } else {
            ElMessage.error(res.data.msg || "创建失败");
          }
          newFolderLoading.value = false;
        }).catch(error => {
          if (axios.isCancel(error)) {
            ElMessage.error(error.message);
            console.log('Request canceled');
          } else {
            ElMessage.error(error.errMsg);
          }
        });
      }
    });
  }

  //搜索
  const handleSearch = function () {
    doc.breadcrumb = [
      {
        label: "全部文件",
        id: 0,
      },
    ];
    getFileList(doc.seaVal);
  };

  //文件下载
  const uploadIds = ref([]);
  const handleDownload = function (row) {
    uploadIds.value.push(row._id);
    api.document
      .downloadFile({
        filePath: row.filePath,
      })
      .then((blob) => {
        const blobData = new Blob([blob]);
        const url = window.URL.createObjectURL(blobData);
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", row.fileName);
        document.body.appendChild(link);
        link.click();
        //下载完成移除元素
        document.body.removeChild(link);
        //释放掉blob对象
        window.URL.revokeObjectURL(url);

        uploadIds.value = uploadIds.value.filter((item) => {
          return item !== row._id;
        });
      });

    //前端下载文件方法，需要文件在线地址，
    // downLoadFile(row.fileUrl);
  };

  //图层树文字溢出tooltip
  const tooltipShow = ref(false);
  const tooltipRef = ref(null);
  const tooltipcontent = ref('');
  const handleEnter = function (e) {
    tooltipRef.value = e.currentTarget;
    tooltipcontent.value = e.currentTarget.innerHTML;
    isEllipsis(e).then((res) => {
      tooltipShow.value = res;
    });
  };


  //自定义树过滤
  const filterTree = function (tree, callback) {
    const result = [];
    for (const item of tree) {
      const res = helpfn(item, callback);
      if (res) {
        result.push(res);
      }
    }
    return result;
  }

  const helpfn = function (item, callback) {

    // 判断条件地方
    if (callback(item)) {
      return item;
    }
    const curent = { ...item, children: [] };
    if (item.children && item.children.length > 0) {
      for (const child of item.children) {
        const res2 = helpfn(child, callback);
        if (res2) {
          curent.children.push(res2);
        }
      }
    }
    return curent.children.length > 0 ? curent : null;
  }

</script>

<template>
  <div class="document" v-loading="treeLoading">
    <div class="doc-l">
      <div class="title">
        <i></i>
        <span>我的文档</span>
      </div>
      <div class="spark-tree">
        <el-tree ref="treeRef" :default-expanded-keys="[0]" :props="{ label: 'fileName', value: 'fileTag' }"
          :data="doc.treeData" node-key="_id" @node-click="nodeHandleClick" :expand-on-click-node="false">
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <i class="icon" :class="getFileType(data)"></i>
              <span style="width: 160px;" @mouseenter="handleEnter($event)" @mouseleave="tooltipShow = false">{{
                node.label }}</span>
              <el-tooltip :visible="tooltipShow" placement="right" :popper-options="{
                modifiers: [
                  {
                    name: 'computeStyles',
                    options: {
                      adaptive: false,
                      enabled: false,
                    },
                  },
                ],
              }" :virtual-ref="tooltipRef" virtual-triggering>
                <template #content>
                  <span> {{ tooltipcontent }} </span>
                </template>
              </el-tooltip>
            </span>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="doc-r">
      <!--进度展示-->
      <div class="file-process" v-if="fileProcessShow">
        <div class="file-process-title">{{ fileName }}</div>
        <div class="file-process-percent" :style="{ width: `${filePercent}%` }"></div>
        <div class="file-process-total">
          <span>{{ fileTotal }}</span>
        </div>
        <div class="file-process-close" @click="stopDownloadClick">
          <el-icon color="#666666" :size="20">
            <CircleClose />
          </el-icon>
        </div>
      </div>
      <div class="file-content" :style="` width: calc(100% - ${doc.filedescStyWidth}px) `">
        <div class="toolbar">
          <div class="search">
            <el-input v-model="doc.seaVal" placeholder="搜索我的文件">
              <template #append>
                <span @click="handleSearch">搜索</span></template>
            </el-input>
          </div>
          <div class="btns" v-if="doc.btnShow">
            <div class="upload" @click="handleUploadDialog">
              <i></i>
              <span>上传文件</span>
            </div>
            <div class="newFolder" @click="handleNewFolderDialog">
              <el-icon>
                <FolderOpened />
              </el-icon>
              <span>新建文件夹</span>
            </div>
          </div>
        </div>

        <div class="breadcrumb">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item @click="breadcrumbHandleClick(item, index)" v-for="(item, index) in doc.breadcrumb"
              :key="index">{{ item.label }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="file-view-grid" v-if="doc.breadcrumb.length === 1">
          <div class="file-view-grid-item" v-for="item in doc.fileView" :key="item.id" @click="gridHandleClick(item)">
            <i class="universe-icon" :class="getFileType(item)"></i>
            <span class="name">{{ item.fileName }}</span>
          </div>
        </div>
        <div class="file-view-table" v-else>
          <el-table ref="multipleTableRef" :data="doc.fileView" :style="`width: 100%; height: ${doc.tableHeight}`"
            @row-click="rowHandleClick" :highlight-current-row="true" :current-row-key="doc.currentRowKey"
            :row-key="getRowKeys">
            <el-table-column align="left" property="label" label="文件名">
              <template #default="scope">
                <i class="universe-icon" :class="getFileType(scope.row)"></i>
                <span>{{ scope.row.fileName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" width="300" property="uploadTime" label="创建时间">
              <template #default="scope">
                <span>{{
                  moment(scope.row.uploadTime || scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" align="center">
              <template #default="scope">
                <el-icon style="cursor: pointer" color="#409EFC" :size="18" v-if="scope.row.type !== `folder`">
                  <Download v-if="!uploadIds.includes(scope.row._id)" @click.stop="handleDownload(scope.row)" />
                  <Loading style="color: #f56c6c" class="load-rotate" v-else />
                </el-icon> </template></el-table-column>
          </el-table>
        </div>
      </div>
      <div v-if="doc.filedescStyWidth" class="file-desc" :style="` width: ${doc.filedescStyWidth}px `">
        <div class="single-file">
          <div class="title">{{ doc.fileDescObj.fileName }}</div>
          <div class="thumb">
            <i :class="getFileType(doc.fileDescObj)"></i>
          </div>
          <div class="file-props">描述</div>
          <div class="prop creatTime">
            <span class="name">创建时间：</span>
            <span class="value" v-if="doc.fileDescObj.uploadTime">{{
              moment(doc.fileDescObj.uploadTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            <span class="value" v-if="doc.fileDescObj.createTime">{{
              moment(doc.fileDescObj.createTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
          </div>
          <div class="prop directory">
            <span class="name">所在目录：</span>
            <span class="value">
              <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item v-for="(item, index) in doc.breadcrumb" :key="index">{{ item.label
                  }}</el-breadcrumb-item>
              </el-breadcrumb>
            </span>
          </div>
        </div>
      </div>
      <div class="preview" v-if="doc.filePreviewShow">
        <file-preview :fname="fname" :ftype="ftype" :fpath="fpath" @closeClick="layerCloseHandleClick" />
      </div>
    </div>
  </div>
  <!--上传文件弹窗-->
  <el-dialog :width="600" v-model="doc.upload.show" title="文件上传" @closed="dialogCloseUpload">
    <el-form v-loading="uploadLoading" element-loading-text="正在上传..." :model="doc.upload.form" :rules="rules"
      ref="ruleFormRef">
      <!-- <el-form-item label="所属模块" :label-width="120" prop="tag">
        <el-cascader placeholder="请选择" v-model="doc.upload.form.tag" :options="doc.folderOpts"
          :props="{checkStrictly: true,label: 'fileName', value: 'fileTag'}" clearable />
      </el-form-item> -->
      <el-form-item label="" :label-width="120" prop="file">
        <el-upload ref="uploadRef" class="uploader" action="" :on-exceed="handleExceed" :on-change="changeUpload"
          multiple :on-remove="handleRemove" :limit="30" :auto-upload="false">
          <el-icon class="uploader-icon">
            <Plus />
          </el-icon>
          <template #tip>
            <div class="el-upload__tip">
              批量上传不超过30个文件。
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="doc.upload.show = false">取消</el-button>
        <el-button :disabled="uploadLoading" type="primary" @click="dialogUpload(ruleFormRef)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!--新建文件夹弹窗-->
  <el-dialog :width="600" v-model="doc.newFolder.show" title="新建文件夹" @closed="dialogCloseNewFolder">
    <el-form v-loading="uploadLoading" element-loading-text="正在创建..." :model="doc.newFolder.form"
      :rules="rulesNewFolder" ref="ruleFormNewFolderRef">
      <!-- <el-form-item label="所属模块" :label-width="120" prop="ptag">
        <el-cascader placeholder="请选择" v-model="doc.newFolder.form.ptag" :options="doc.folderOpts"
          :props="{checkStrictly: true,label: 'fileName', value: 'fileTag'}" clearable />
      </el-form-item> -->
      <el-form-item style="width: 352px;" label="文件名称" :label-width="120" prop="dirName">
        <el-input v-model="doc.newFolder.form.dirName" placeholder="请输入文件名称" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="doc.newFolder.show = false">取消</el-button>
        <el-button :disabled="uploadLoading" type="primary" @click="dialogNewFolder(ruleFormNewFolderRef)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
  .document {
    width: 100%;
    display: flex;
    font-family: SourceHanSansSC;
    color: #ffffff;
    height: calc(100vh - 85px);
    overflow-x: hidden;
    overflow-y: auto;

    .root {
      background-image: url("@/assets/images/pm/root.png") !important;
    }

    .folder {
      background-image: url("@/assets/images/pm/folder.png") !important;
    }

    .xlsx {
      background-image: url("@/assets/images/pm/xlsx.png") !important;
    }

    .pdf {
      background-image: url("@/assets/images/pm/pdf.png") !important;
    }

    .ppt,
    .pptx {
      background-image: url("@/assets/images/pm/ppt.png") !important;
    }

    .rar,
    .zip {
      background-image: url("@/assets/images/pm/rar.png") !important;
    }

    .rvt {
      background-image: url("@/assets/images/pm/rvt.png") !important;
    }

    .wps {
      background-image: url("@/assets/images/pm/wps.png") !important;
    }

    .doc,
    .docx {
      background-image: url("@/assets/images/pm/word.png") !important;
    }

    .rft {
      background-image: url("@/assets/images/pm/rft.png") !important;
    }

    .txt {
      background-image: url("@/assets/images/pm/txt.png") !important;
    }

    .mp4 {
      background-image: url("@/assets/images/pm/mp4.png") !important;
    }

    .jpg,
    .jpeg,
    .png,
    .gif {
      background-image: url("@/assets/images/pm/img.png") !important;
    }

    >div {
      height: calc(100vh - 85px);
      min-height: 560px;
      border: 1px solid #dce3ef;
      box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
      border-radius: 6px;
      background: #ffffff;
    }

    .doc-l {
      width: 250px;
      padding: 0px 10px;
      box-sizing: border-box;

      .title {
        width: 100%;
        height: 40px;
        line-height: 35px;
        text-indent: 40px;
        background-repeat: no-repeat;
        background-size: 102% 100%;
        background-image: url("@/assets/images/pm/doc-l-title.png");
        margin-top: 5px;
      }

      .spark-tree {
        width: 100%;
        margin-top: 10px;
        max-height: calc(100vh - 180px);
        overflow-y: auto;
        overflow-x: hidden;

        :deep .el-tree {
          .el-tree-node__expand-icon {
            margin-top: -7px;
          }

          .custom-tree-node {
            i {
              float: left;
              margin-top: 2px;
              width: 15px;
              height: 15px;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              margin-right: 5px;
              background-image: url("@/assets/images/pm/rft.png");
            }

            span {
              display: inline-block;
              max-width: 160px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              color: #303030;
              font-size: 13px;
            }
          }
        }
      }
    }

    .doc-r {
      width: calc(100% - 255px);
      height: calc(100vh - 87px);
      min-height: 560px;
      margin-left: 5px;
      display: flex;
      position: relative;

      .file-process {
        height: 40px;
        position: absolute;
        bottom: 40px;
        right: 20px;
        border: 1px solid #dce3ef;
        box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
        border-radius: 6px;
        background: #ffffff;
        line-height: 40px;
        padding: 0px 10px;
        box-sizing: border-box;
        color: #656565;
        z-index: 99;
        display: flex;
        justify-content: space-around;
        font-size: 12px;

        .file-process-percent {
          height: 38px;
          background: rgba(110, 145, 251, 0.4);
          position: absolute;
          left: 0px;
          top: 0px;
          border-radius: 6px;
        }

        .file-process-total {
          padding: 0px 20px;
        }

        .file-process-title {
          max-width: 180px;
          font-weight: bold;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .file-process-close {
          line-height: 50px;
          cursor: pointer;
        }
      }

      .preview {
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 9;
      }

      .file-content {
        padding: 0px 10px;
        box-sizing: border-box;
        position: relative;

        .toolbar {
          width: 100%;
          height: 35px;
          display: flex;
          justify-content: space-between;
          margin-top: 10px;

          .search {
            width: 440px;
            height: 34px;
            margin-left: 20px;
            border: 1px solid #dce3ef;
            box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
            border-radius: 20px;
            background: #f1f3f8;

            :deep .el-input {

              .el-input__wrapper,
              .el-input-group__append {
                box-shadow: none;
                background: unset;
                font-size: 12px;
              }

              .el-input__wrapper {
                padding-left: 20px;
              }

              .el-input-group__append {
                border-left: 1px #b9b9b9 solid;
                padding: 0px 20px 0px 10px;
                height: 25px;
                margin-top: 5px;
                cursor: pointer;
              }
            }
          }

          .btns {
            width: 200px;
            display: flex;
            justify-content: space-between;
            margin: 5px 0px 0px 0px;

            .upload {
              border-radius: 4px;
              background: #8f93f7;
              color: #ffffff;
            }

            .newFolder {
              border: 1px #bbbbbb solid;
              border-radius: 4px;
            }

            >div {
              height: 25px;
              line-height: 25px;
              padding: 0px 12px;
              box-sizing: border-box;
              color: #303030;
              font-size: 12px;
              cursor: pointer;

              i {
                float: left;
                width: 12px;
                height: 12px;
                background-repeat: no-repeat;
                background-size: contain;
                margin-top: 5px;
                margin-right: 5px;
              }
            }

            .upload {
              i {
                background-image: url("@/assets/images/pm/upload.png");
              }
            }
          }
        }

        .breadcrumb {
          width: 100%;
          height: 40px;
          padding-left: 20px;
          box-sizing: border-box;

          :deep .el-breadcrumb {
            .el-breadcrumb__item {
              line-height: 40px;
            }

            .el-breadcrumb__item:last-child {
              .el-breadcrumb__inner {
                color: #394880;
                font-weight: bold;
              }
            }
          }
        }

        .file-view-grid {
          width: 100%;
          height: calc(100vh - 180px);
          overflow-x: hidden;
          overflow-y: auto;
          color: #303030;
          margin-left: 10px;

          .file-view-grid-item {
            float: left;
            width: 23%;
            height: 50px;
            border: 1px solid #dce3ef;
            box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
            border-radius: 6px;
            display: flex;
            padding: 10px;
            box-sizing: border-box;
            margin: 10px;

            .universe-icon {
              display: inline-block;
              margin-top: 2px;
              width: 60px;
              height: 24px;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              background-image: url("@/assets/images/pm/rft.png");
            }

            .name {
              display: inline-block;
              width: calc(100% - 100px);
              line-height: 25px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              cursor: pointer;
            }

            .menu-more {
              width: 30px;
              font-weight: bold;
              font-size: 18px;
              line-height: 15px;
              margin-left: 10px;
              cursor: pointer;
              border-radius: 50%;
              text-align: center;
            }

            .menu-more:hover {
              background: #eee;
            }
          }
        }

        .file-view-table {
          width: 100%;
          padding-left: 10px;
          box-sizing: border-box;

          .universe-icon {
            float: left;
            margin-top: 2px;
            width: 50px;
            height: 20px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url("@/assets/images/pm/rft.png");
          }

          :deep .el-table {
            min-height: 465px;

            th.el-table__cell {
              background-color: #ecedff;
            }

            th.el-table__cell {
              color: #434343;
              font-weight: normal;
            }

            .el-table__inner-wrapper {
              min-height: 465px;
            }

            .el-table__inner-wrapper::before {
              height: 0px;
            }
          }

          .load-rotate {
            animation: rotate infinite 2s linear;
          }

          @keyframes rotate {
            from {
              transform: rotate(0deg);
            }

            to {
              transform: rotate(360deg);
            }
          }
        }

        .btm-tool {
          width: 95%;
          height: 45px;
          border-top: 1px #e3e3e3 solid;
          position: absolute;
          bottom: 20px;
          left: 20px;
          color: #303030;

          .single-btn,
          .mult-btn {
            width: 100%;
            display: flex;
            margin-top: 10px;

            >div {
              width: 95px;
              height: 30px;
              text-align: center;
              line-height: 30px;
              cursor: pointer;
              border: 1px solid #6e91fb;
              border-radius: 4px;
              color: #6e91fb;
              margin: 0px 5px;
            }

            .del {
              border: 1px solid #fb8f6e;
              color: #fb8f6e;
            }
          }
        }
      }

      .file-desc {
        height: calc(100vh - 105px);
        border-left: 1px #eee solid;
        margin-top: 10px;
        padding: 0px 10px;
        box-sizing: border-box;

        >div {
          width: 100%;
          color: #303030;
        }

        .single-file {
          width: 100%;

          >div {
            width: 100%;
            overflow: hidden;
          }

          .prop {
            font-size: 12px;
            margin-bottom: 5px;
            color: #656565;
            margin-bottom: 10px;

            .name {
              float: left;
              width: 70px;
            }

            .value {
              float: left;
              max-width: 200px;

              :deep .el-breadcrumb {
                font-size: 12px;
                margin-top: 3px;

                .el-breadcrumb__item {
                  margin-bottom: 5px;
                }

                .el-breadcrumb__separator.el-icon {
                  margin: 0px;
                }
              }
            }
          }

          .title,
          .file-props {
            color: #434343;
            font-weight: bold;
            font-size: 13px;
            padding-bottom: 10px;
          }

          .thumb {
            height: 200px;
            background: #f2f4f5;
            border-radius: 8px;
            display: flex;
            margin-bottom: 10px;

            i {
              display: inline-block;
              align-items: center;
              width: 90px;
              height: 80px;
              margin: auto;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              background-image: url("@/assets/images/pm/rft.png");
            }
          }
        }

        .mult-file {
          width: 100%;

          .thumb {
            height: 200px;
            background: #f2f4f5;
            border-radius: 8px;
            display: flex;
            margin-bottom: 10px;
            font-size: 60px;

            i {
              margin: auto;
              color: #979797;
            }
          }
        }
      }
    }
  }

  :deep .uploader {
    width: 100%;

    .el-upload {
      border: 1px solid #eee;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      padding: 30px;
    }
  }
</style>